<template>
	<page-body>
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center auntieList_flex_0_hiae"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub auntieList_fd0_0_hiae'>
					<view class='flex flex-wrap align-center auntieList_fd0_0_c0_hiae' @tap.stop="handleJumpDiy"
						data-type="back" data-url="1">
						<text class='fu-iconfont2  auntieList_fd0_0_c0_c0_hiae'>&#xe794;</text>
					</view>
					<text class='auntieList_fd0_0_c1_hiae'>{{$t('阿姨列表')}}</text>
					<view class='flex flex-wrap align-center auntieList_fd0_0_c0_hiae'>
					</view>
				</view>

			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<!---flex布局flex布局开始-->
			<view class="flex align-stretch justify-between benben-flex-layout auntieList_flex_1_hiae">
				<scroll-view class='auntieList_fd1_0_hiae' :scroll-x='true' :scroll-y='false' :show-scrollbar='false'
					:enhanced="true">
					<view class='flex benben-scroll flex align-center'>
						<benben-select-diys ref="showSelectPopup1748486313130" class-name='flex align-center'
							:items.sync="classificationType" v-model="classification_id" default-type="aid"
							default-label="name" :allow-cancel='true' type="checkbox" :disabled='false' :max-select="-1"
							@change="getwd3942c7d93a37Func()">
							<benben-select-items v-for='(item,key0) in classificationType' :hand-value='item.aid'
								:key='key0'>
								<template #selected>
									<view class='flex flex align-center auntieList_fd1_0_c0_c0_hiae'>
										<text class='auntieList_fd1_0_c0_c0_c0_hiae'>{{item.name}}</text>
									</view>
								</template><template #no-selected>
									<view class='flex flex align-center auntieList_fd1_0_c0_c1_hiae'>
										<text>{{item.name}}</text>
									</view>
								</template>
							</benben-select-items>
						</benben-select-diys>
					</view>
				</scroll-view>
				<text class='self-center auntieList_fd1_1_hiae'
					@tap.stop="popupShow1747725619813=true">{{$t('全部')}}</text>
			</view>
			<!---flex布局flex布局结束-->
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout auntieList_flex_2_hiae">
				<template v-for='(item,key0) in auntList'>
					<view class='flex flex-direction flex-wrap align-stretch auntieList_fd2_0_hiae' :key='key0'
						@tap="handleJumpDiy" data-type="navigateTo"
						:data-url="`/pages/index/masterDetails/masterDetails?id=${item.user_id}`">
						<view class='flex flex-wrap align-stretch flex-sub auntieList_fd2_0_c0_hiae'>
							<image class='auntieList_fd2_0_c0_c0_hiae' mode="aspectFit" :src='item.avatar'>
							</image>
							<view
								class='flex flex-direction flex-wrap align-stretch flex-sub auntieList_fd2_0_c0_c1_hiae'>
								<view class='flex flex-wrap align-center auntieList_fd2_0_c0_c1_c0_hiae'>
									<view class='flex flex-wrap align-center flex-sub'>
										<text class='auntieList_fd2_0_c0_c1_c0_c0_c0_hiae'>{{item.nickname}}</text>
										<text class='auntieList_fd2_0_c0_c1_c0_c0_c1_hiae'>|</text>
										<text class='auntieList_fd2_0_c0_c1_c0_c0_c2_hiae'>{{item.age}}</text>
										<text class='auntieList_fd2_0_c0_c1_c0_c0_c1_hiae'>{{$t('岁')}}</text>
									</view>
									<text class='auntieList_fd2_0_c0_c1_c0_c1_hiae'>{{$t('接单量')}}</text>
									<text class='auntieList_fd2_0_c0_c1_c0_c2_hiae'>{{item.order_count}}</text>
								</view>
								<view class='flex flex-wrap align-center auntieList_fd2_0_c0_c1_c0_hiae'>
									<view class='flex align-center justify-between'>
										<template v-for='(child,key1) in item.category'>
											<view class='flex flex-wrap align-center index_fd0_1_c0_c2_c0_hiae'
												:key='key1'>
												<text class='auntieList_fd2_0_c0_c1_c1_c0_c0_hiae'>{{child.name}}</text>
											</view>
										</template>
									</view>
								</view>
								<view class='flex flex-wrap align-center auntieList_fd2_0_c0_c1_c2_hiae'>
									<view class='flex flex-wrap align-center'>
										<template v-for="starNum in [1,2,3,4,5]">
											<image v-if="item.start_count >= starNum" :key="starNum"
												class='auntieList_star1fd2_0_c0_c1_c2_c0_hiae' mode="aspectFit"
												:src='STATIC_URL+"105.png"'></image>
											<image v-else :key="starNum" class='auntieList_star1fd2_0_c0_c1_c2_c0_hiae'
												mode="aspectFit" :src='STATIC_URL+"104.png"'></image>
										</template>
									</view>
									<text class='auntieList_fd2_0_c0_c1_c2_c1_hiae'>{{item.start_count}}</text>
								</view>
							</view>
						</view>
						<view class='flex flex-wrap align-center auntieList_fd2_0_c1_hiae'>
							<button class='auntieList_fd2_0_c1_c0_hiae' @tap="handleJumpDiy" data-type="navigateTo"
								:data-url="`/pages/index/masterDetails/masterDetails?id=${item.user_id}`">{{$t('查看详情')}}</button>
						</view>
					</view>
				</template>
				<fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData"
					:listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
			</view>

			<!---flex布局flex布局结束-->
			<benben-popup v-model="popupShow1747725619813" :mask="true" :mask-close-able="true" mode='top'
				:z-index='999'>
				<!---flex布局flex布局开始-->
				<view class="flex flex-direction align-stretch benben-flex-layout auntieList_flex_3_hiae">
					<view class='flex flex-wrap align-center justify-between auntieList_fd3_0_hiae'>
						<view class='flex flex-wrap align-center auntieList_fd3_0_c0_hiae' @tap.stop="handleJumpDiy"
							data-type="back" data-url="1">
							<text class='fu-iconfont2  auntieList_fd0_0_c0_c0_hiae'>&#xe794;</text>
						</view>
						<text class='auntieList_fd3_0_c1_hiae'>{{$t('阿姨列表')}}</text>
						<view class='flex flex-wrap align-center auntieList_fd3_0_c0_hiae'>
						</view>
					</view>
					<view class='flex flex-wrap align-center justify-between auntieList_fd3_1_hiae'>

						<scroll-view class='auntieList_fd3_1_c0_hiae' :scroll-x='false' :scroll-y='true'
							:show-scrollbar='true' :enhanced="true">
							<view class='flex benben-scroll flex align-center'>
								<benben-select-diys ref="showSelectPopup1747726679198"
									class-name='flex-wrap align-center flex' :items.sync="classificationType"
									v-model="classification_id" default-type="aid" default-label="name"
									:allow-cancel='true' type="checkbox" :disabled='false' :max-select="-1"
									@change="getwd3942c7d93a37Func()">
									<benben-select-items v-for='(item,key0) in classificationType'
										:hand-value='item.aid' :key='key0'>
										<template #selected>
											<view
												class='flex align-center justify-center flex auntieList_fd3_1_c0_c0_c0_hiae'>
												<text class='auntieList_fd3_1_c0_c0_c0_c0_hiae'>{{item.name}}</text>
											</view>
										</template><template #no-selected>
											<view
												class='flex align-center justify-center flex auntieList_fd3_1_c0_c0_c1_hiae'>
												<text>{{item.name}}</text>
											</view>
										</template>
									</benben-select-items>
								</benben-select-diys>
							</view>
						</scroll-view>

						<view class='flex flex-wrap align-center justify-center flex-sub auntieList_fd3_1_c1_hiae'>
							<view class='flex flex-wrap align-center' @tap.stop="popupShow1747725619813=false">
								<text>{{$t('收起')}}</text>
								<text class='fu-iconfont2  auntieList_fd3_1_c1_c0_c1_hiae'>&#xe7ed;</text>
							</view>
						</view>
					</view>
				</view>

				<!---flex布局flex布局结束-->

			</benben-popup>


		</view>
	</page-body>
</template>
<script>
	import pagingList from '@/common/mixin/paging_list.js';
	import {
		validate
	} from '@/common/utils/validate.js'

	export default {
		components: {},
		mixins: [pagingList],

		data() {
			return {
				"popupShow1747725619813": false,
				"fd2_0_c0_c1_c2_c0": 2,
				"minixPagingListsApi": "",
				"pageingListApiMethod": "",
				"allowOnloadGetList": false,
				"auntList": [],
				"classification_id": "",
				"classificationType": []
			};
		},
		computed: {

		},
		watch: {},
		onLoad(options) {
			this.getwd3942c7d93a37Func()
			this.getclassificationTypeFunc()
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {
			this.getwd3942c7d93a37Func()
			this.getclassificationTypeFunc()
		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			//获取分类
			async getclassificationTypeFunc() {
				//请求方法
				//数据验证 

				let dataclassificationType = await this.$api.get(global.apiUrls.post683520d61ceb3, {

				});

				if (dataclassificationType.data.code != 1) {
					this.$message.info(dataclassificationType.data.msg);
					return
				}
				let infoclassificationType = dataclassificationType.data;
				this.classificationType = infoclassificationType.data
			},
			//获取阿姨列表
			getwd3942c7d93a37Func() {
				this.minixPagingListsApi = global.apiUrls.post683532daf12aa;
				this.pageingListApiMethod = 'post';
				this.allowOnloadGetList = false;
				this.pagingListPostDataContent = {
					cid: this.classification_id,
				}
				this.listData = [];
				this.auntList = this.listData;
				this.pagingListToggle();

			},
			pagingListPostData() {
				return this.pagingListPostDataContent
			}
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: rgba(248, 248, 248, 1);
		background-size: 100% auto;

		.auntieList_flex_3_hiae {
			background: #fff;
			background-size: 100% auto !important;

			.auntieList_fd3_0_hiae {
				margin: 95rpx 0rpx 0rpx 0rpx;
				height: 88rpx;
				padding: 0rpx 32rpx 0rpx 32rpx;

				.auntieList_fd3_0_c1_hiae {
					font-size: 36rpx;
					font-weight: 500;
					color: #333;
				}
			}

			.auntieList_fd3_1_hiae {
				padding: 32rpx 32rpx 8rpx 32rpx;

				.auntieList_fd3_1_c0_hiae {
					touch-action: none;
					width: 686rpx;

					.auntieList_fd3_1_c0_c0_c0_hiae {
						padding: 8rpx 16rpx 8rpx 16rpx;
						background: rgba(255, 233, 233, 1);
						background-size: 100% auto;
						margin: 0rpx 24rpx 024rpx 0rpx;
						border-radius: 8rpx;
						height: 64rpx;
						width: 200rpx;

						.auntieList_fd3_1_c0_c0_c0_c0_hiae {
							font-weight: 500;
							color: rgba(227, 29, 26, 1);
						}
					}

					.auntieList_fd3_1_c0_c0_c1_hiae {
						padding: 8rpx 16rpx 8rpx 16rpx;
						border-radius: 8rpx;
						background: rgba(245, 245, 245, 1);
						background-size: 100% auto;
						margin: 0rpx 24rpx 24rpx 0rpx;
						height: 64rpx;
						width: 200rpx;
					}
				}

				.auntieList_fd3_1_c1_hiae {
					margin: 24rpx 0rpx 24rpx 0rpx;

					.auntieList_fd3_1_c1_c0_c1_hiae {
						font-size: 16rpx;
						margin: 0rpx 0rpx 0rpx 16rpx;
					}
				}
			}
		}

		.auntieList_fd3_0_c0_hiae {
			width: 120rpx;
			height: 88rpx;

			.auntieList_fd3_0_c0_c0_hiae {
				width: 20rpx;
				height: 36rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				margin: 0rpx 0rpx 0rpx 0rpx;
			}
		}

		.auntieList_flex_2_hiae {
			padding: 20rpx 24rpx 0rpx 24rpx;

			.auntieList_fd2_0_hiae {
				background: rgba(255, 255, 255, 1);
				background-size: 100% auto;
				border-radius: 16rpx;
				padding: 0rpx 24rpx 0rpx 24rpx;
				margin: 0rpx 0rpx 20rpx 0rpx;

				.auntieList_fd2_0_c0_hiae {
					padding: 24rpx 0rpx 24rpx 0rpx;

					.auntieList_fd2_0_c0_c0_hiae {
						width: 100rpx;
						height: 100rpx;
						border-radius: 15rpx 15rpx 15rpx 15rpx;
					}

					.auntieList_fd2_0_c0_c1_hiae {
						margin: 0rpx 16rpx 0rpx 24rpx;

						.auntieList_fd2_0_c0_c1_c2_hiae {
							margin: 0rpx 0rpx 0rpx 0rpx;

							.auntieList_star1fd2_0_c0_c1_c2_c0_hiae {
								height: 24rpx;
								margin: 0rpx 5rpx 0rpx 0rpx;
								width: 24rpx;
							}

							.auntieList_fd2_0_c0_c1_c2_c1_hiae {
								font-size: 24rpx;
								font-weight: 400;
								color: #999999;
								line-height: 33rpx;
								margin: 0rpx 0rpx -8rpx 10rpx;
							}
						}
					}
				}

				.auntieList_fd2_0_c1_hiae {
					padding: 24rpx 0rpx 24rpx 0rpx;
					border-top: 1px solid #eee;

					.auntieList_fd2_0_c1_c0_hiae {
						border-radius: 30rpx 30rpx 30rpx 30rpx;
						font-size: 28rpx;
						background: rgba(227, 29, 26, 1);
						color: #fff;
						width: 170rpx;
						height: 61rpx;
						line-height: 61rpx;
						margin: 0rpx 0rpx 0rpx auto;
					}
				}
			}
		}

		.auntieList_fd2_0_c0_c1_c0_hiae {
			margin: 0rpx 0rpx 16rpx 0rpx;

			.auntieList_fd2_0_c0_c1_c0_c0_c0_hiae {
				color: #333333;
				font-size: 32rpx;
				font-weight: 700;
				line-height: 45rpx;
				margin: 0rpx 16rpx 0rpx 0rpx;
			}

			.auntieList_fd2_0_c0_c1_c0_c0_c2_hiae {
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
				line-height: 33rpx;
				margin: 0rpx 0rpx 0rpx 16rpx;
			}

			.auntieList_fd2_0_c0_c1_c0_c1_hiae {
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
				line-height: 33rpx;
				margin: 0rpx 10rpx 0rpx auto;
			}

			.auntieList_fd2_0_c0_c1_c0_c2_hiae {
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
				line-height: 33rpx;
			}
		}

		.auntieList_fd2_0_c0_c1_c0_c0_c1_hiae {
			font-size: 26rpx;
			font-weight: 400;
			color: #333333;
			line-height: 33rpx;
		}

		.auntieList_fd2_0_c0_c1_c1_c0_c0_hiae {
			font-size: 24rpx;
			color: var(--benbenFontColor1);
			font-weight: 500;
			// margin: 8rpx 16rpx 0rpx 0rpx;
			background: #f8f8f8;
			background-size: 100% auto;
			padding: 4rpx 8rpx 4rpx 8rpx;
			border-radius: 4rpx;
		}

		.auntieList_fd2_0_c0_c1_c1_c0_c1_hiae {
			font-size: 24rpx;
			color: var(--benbenFontColor1);
			font-weight: 500;
			margin: 8rpx 16rpx 0rpx 0rpx;
			background: #f8f8f8;
			background-size: 100% auto;
			padding: 4rpx 8rpx 4rpx 8rpx;
			border-radius: 4rpx;
		}

		.auntieList_flex_1_hiae {
			background: rgba(255, 255, 255, 1);
			background-size: 100% auto !important;
			padding: 24rpx 24rpx 24rpx 24rpx;

			.auntieList_fd1_0_hiae {
				// touch-action: none;
				white-space: nowrap;
				width: 600rpx;
				width: 635rpx;

				.auntieList_fd1_0_c0_c0_hiae {
					margin: 0rpx 20rpx 0rpx 0rpx;
					border-radius: 8rpx;
					padding: 8rpx 16rpx 8rpx 16rpx;
					background: rgba(255, 233, 233, 1);
					background-size: 100% auto;
					display: inline-block;

					.auntieList_fd1_0_c0_c0_c0_hiae {
						color: rgba(227, 29, 26, 1);
						font-weight: 500;
					}
				}

				.auntieList_fd1_0_c0_c1_hiae {
					margin: 0rpx 20rpx 0rpx 0rpx;
					padding: 8rpx 16rpx 8rpx 16rpx;
					border-radius: 8rpx;
					background: rgba(245, 245, 245, 1);
					background-size: 100% auto;
					display: inline-block;
				}
			}

			.auntieList_fd1_1_hiae {
				color: var(--benbenFontColor0);
				font-weight: 500;
				font-size: 28rpx;
				margin-top: 8rpx;
			}
		}

		.auntieList_flex_0_hiae {
			width: 750rpx;
			height: 88rpx;
			overflow: hidden;
			z-index: 10;
			top: 0rpx;
			background: #fff;
			background-size: 100% auto !important;
			border-bottom: 1px solid #eee;

			.auntieList_fd0_0_hiae {
				padding: 0rpx 32rpx 0rpx 32rpx;
				height: 88rpx;

				.auntieList_fd0_0_c1_hiae {
					font-size: 36rpx;
					font-weight: 500;
					color: #333;
				}
			}
		}

		.auntieList_fd0_0_c0_hiae {
			width: 120rpx;
			height: 88rpx;

			.auntieList_fd0_0_c0_c0_hiae {
				font-size: 32rpx;
				color: #333;
			}
		}
	}

	.index_fd0_1_c0_c2_c0_hiae {
		margin: 0rpx 16rpx 0rpx 0rpx;
	}
</style>